<template>
  <div class="search">
    <!-- 查找海报 -->
    <van-search v-model="keyword" show-action @search="searchPosters" placeholder="搜索海报" />
    <van-list v-if="searchResult.length > 0" :finished="true">
      <van-cell v-for="poster in searchResult" :key="poster.id" :label="poster.category"
        :to="{ name: 'Poster', params: { id: poster.id } }">
        <van-image slot="icon" :src="poster.cover" width="250px" height="350px" />
        <h1>{{ poster.title }}</h1>
        <p>{{ poster.description }}</p>
      </van-cell>
    </van-list>
    <van-empty v-else description="无搜索结果" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Search, List, Cell, Empty, Image } from 'vant'

export default {
  data() {
    return {
      keyword: '',
      searchResult: []
    }
  },
  computed: {
    ...mapState(['posters'])
  },
  methods: {
    searchPosters() {
      this.searchResult = this.posters.filter(poster => poster.title.includes(this.keyword))
    }
  }
}
</script>

<style scoped>
.search {
  padding: 10px;
}
</style>
